<template>
  <div class="wrapper">
    <div class="search">
      <span class="search__font iconfont" @click="handleClick">&#xe65e;</span>
      <div class="search__content">
        <span class="search__content__font iconfont">&#xe631;</span>
        <input
          type="text"
          class="search__content__box"
          placeholder="请输入商品名称搜索"
        />
      </div>
    </div>
    <!-- 给ShopInfo组件绑定该商店的信息，底部边框设置为不可见，并且在接收到图片地址后展示 -->
    <ShopInfo :item="item" :hide="true" v-show="item.imgUrl" />
    <!-- 给Content组件绑定当前商店名字属性 -->
    <Content :shopName="item.name" />
    <Cart />
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import { reactive,onMounted } from "vue";
import { get } from "../../utils/post";
import ShopInfo from "../../components/ShopInfo";
import Content from "./Content";
import Cart from "./Cart";

const useItem = () => {
  const route = useRoute();
  let item = reactive({});
    // 设置getItem方法 ，发送请求，接收当前商店的信息
  const getItem = async () => {
    const result = await get(`/api/shop/${route.params.id}`);
    if (result?.errno === 0 && result?.data) {
      // 成功接收到信息后将相关信息赋值给item
      for (var k in result.data) {
        item[k] = result.data[k];
      }
    }
    console.log(item.imgUrl);
  };
  return {item,getItem}
};

const useBack = () => {
  const router = useRouter();
  // 设置点击“返回”按钮事件，退回到上一个页面
  const handleClick = () => {
    router.back();
  };
  return handleClick;
};

export default {
  name: "Shop",
  components: { ShopInfo, Content, Cart },
  setup() {
    const {item,getItem} = useItem();
    // onMounted(getItem());
    const handleClick = useBack();
    onMounted(getItem());
    return {
      item,
      handleClick,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables";
.wrapper {
  padding: 0 0.18rem;
  .search {
    display: flex;
    padding-top: 0.16rem;
    margin-bottom: 0.04rem;
    &__font {
      font-size: 0.2rem;
      line-height: 0.32rem;
      margin-right: 0.16rem;
    }
    &__content {
      height: 0.32rem;
      flex: 1;
      background-color: $input-bgcolor;
      border-radius: 0.16rem;
      padding: 0 0.16rem;
      display: flex;
      &__font {
        font-size: 0.16rem;
        line-height: 0.32rem;
        margin-right: 0.12rem;
      }
      &__box {
        flex: 1;
        border: none;
        outline: none;
        background: none;
        height: 100%;
        padding: 0;
        font-size: 0.14rem;
        color: $content-fontcolor;
        &::placeholder {
          color: $content-fontcolor;
        }
      }
    }
  }
}
</style>